html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
body{margin:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0}
[hidden],template{display:none}
a{background-color:transparent}
a:active,a:hover{outline:0}
li,ul{list-style:none}
.float:after,.float:before,.list_group:after,.list_group:before{display:table;content:" ";clear:both}
.float .left{float:left}
.float .right{float:right}
.list_group li{float:left;text-align:center}
.list_group li span{display:block;font-size:12px;color:#a99c9c}
.border-left{border-left:1px solid #ccc}
.container_{width:1152px}
.video_box{height:404px}
.material_box{width:812px}
.board{width:540px;height:405px}
.video .v_box{width:272px;height:202px}
.ppt_set{height:56px;width:540px}
.video_set{height:56px;width:272px}
.chat{width:340px;height:628px}
.bottom-panel{height:168px}
@media screen and (max-width:1366px){.container_{width:1152px}
.video_box{height:404px}
.material_box{width:812px}
.board{width:540px;height:405px}
.video .v_box{width:272px;height:202px}
.ppt_set{height:56px;width:540px}
.video_set{height:56px;width:272px}
.chat{width:340px;height:628px}
.bottom-panel{height:168px}
.sendMsg .sendBtn{margin-top:1px!important}
}
@media screen and (min-width:1366px) and (max-width:1600px){.container_{width:1276px}
.video_box{height:468px}
.material_box{width:936px}
.board{width:624px;height:468px}
.video .v_box{width:312px;height:234px}
.ppt_set{height:56px;width:624px}
.video_set{height:56px;width:312px}
.chat{width:340px;height:724px}
}
@media screen and (min-width:1600px) and (max-width:1990px){.container_{width:1360px}
.video_box{height:510px}
.material_box{width:1020px}
.board{width:680px;height:510px}
.video .v_box{width:340px;height:255px}
.ppt_set{height:56px;width:680px}
.video_set{height:56px;width:340px}
.chat{width:340px;height:766px}
.bottom-panel{height:200px}
}
body,html{width:100%;height:100%}
*{padding:0;margin:0;box-sizing:border-box}
.container_{margin:16px auto 10px}
.board{background-color:#ccc;position:relative}
.codePage{padding:3px 10px;color:#fff;font-size:14px;position:absolute;right:0;bottom:0;background:rgba(60,56,56,.72)}
.video{height:100%}
.video .v_box{border:1px solid #ccc}
.video .teacher{border-top-color:transparent}
.video .status{width:100%;height:100%;text-align:center;padding:22% 0 0 0}
.video .status .role_img{width:100px;height:100px;margin:auto;display:inline-block;overflow:hidden;border-radius:50%}
.video .status .role_img img{width:100%;height:100%}
.video .status span{display:block;text-align:center;font-size:14px;color:#000;margin:8px 0}
.video .status span:last-child{font-size:12px;color:#ccc}
.video .status span.online{color:#1cf835}
.setting{background-color:rgba(214,214,214,.2)}
.tool{padding:2px 4px;height:100%}
.tool li{cursor:pointer;margin-right:18px;position:relative}
.tool li span:first-child{height:26px;width:26px;margin:4px auto}
.tool li:last-child{float:right}
.tool li:nth-last-child(2){float:right;margin-right:0}
.tool li .more_handle{visibility:hidden;z-index:100;height:0;position:absolute;top:0;left:-10px}
.tool li .more_handle:after{display:block;content:'';width:0;height:0;border:8px solid;border-color:#fff transparent transparent transparent;position:absolute;top:0;left:10px;z-index:100}
.tool li .more_handle .handle{width:136px;text-align:left;background-color:#fff;font-size:14px;color:#c3c3c3;position:absolute;bottom:0;left:0;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:2px 1px 2px rgba(183,183,183,.74);box-shadow:2px 1px 2px rgba(183,183,183,.74)}
.tool li .more_handle .handle h6{padding:8px 10px;border-bottom:1px solid #ccc}
.tool li .more_handle .handle .handleCont{margin-top:8px;margin-bottom:8px;padding-left:10px}
.tool li .more_handle .handle .handleCont p{cursor:pointer;display:block;padding:2px 0}
.tool li:hover .more_handle{visibility:visible}
.tool li:hover span{color:#21f82d!important}
.video_set{padding-left:20px;border-left:1px solid #ccc;border-right:1px solid #ccc}
.chat{border:1px solid #ccc;border-left:none}
.chat-box{position:relative;height:82%}
.sendMsg{width:100%;padding:8px;height:18%;border-top:1px solid #ccc}
.sendMsg .enterMsg{overflow-y:auto;outline:0;height:80%;width:100%;border:none;resize:none;border-radius:3px;background-color:rgba(177,172,172,.15)}
.sendMsg .sendBtn{width:56px;height:22px;line-height:22px;text-align:center;border-radius:3px;background-color:#31d2fe;color:#fff;border:none;outline:0;cursor:pointer;float:right;margin-top:6px;margin-right:10px}
.chat-box .title .img{cursor:pointer;border-radius:50%}
.chat-box .title span{display:block;width:50%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;-moz-text-overflow:ellipsis;-ms-text-overflow:ellipsis}
.chat-box .error{cursor:pointer}
.u-chat-notice{z-index:5;background-color:#fbfcbe;width:710px;height:14px;position:absolute;top:80px;opacity:.8;text-align:center;padding:20px 0;font-size:14px}
.chat-mask{z-index:5;background-color:#e5f4ff;width:710px;height:14px;position:absolute;bottom:9px;opacity:.8;text-align:center;padding:20px 0;font-size:14px}
.chat-content{position:absolute;top:10px;bottom:10px;width:100%;overflow-y:auto;padding:0 3%}
.chat-content .item{overflow:hidden;padding:4px 0 10px 0}
.chat-content .img{cursor:pointer;border-radius:50%}
.no-msg span{padding:3px 15px;background-color:#e5f4ff;color:#6b8299}
.item-you img{float:left;margin-right:14px}
.item-me img{float:right;margin-left:14px}
.item-me .img,.item-you .img{width:40px;height:40px}
.msg{position:relative;margin-top:5px;border-radius:8px;border:1px solid}
.item-you .nick{color:#3a4a59;font-size:12px;padding-top:5px}
.item-you .msg-text{float:left;color:#6b8299;background:#eaeeef;border-color:#eee;-webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 1px 1px rgba(0,0,0,.06);-moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 1px 1px rgba(0,0,0,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 1px 1px rgba(0,0,0,.06)}
.item-me .msg-text{float:right;color:#fff;background:#5cacde}
.item-me .download-file{display:block;color:#fff;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item-you .download-file{display:block;color:#666}
.msg:after,.msg:before{content:' ';position:absolute;top:11px;border-top:5px solid transparent;border-bottom:5px solid transparent;width:0;height:0}
.item-you .msg:before{right:100%;border-right:5px solid #eaeeef}
.item-you .msg:after{background:0 0}
.item-me .msg:before{background:0 0}
.item-me .msg:after{left:100%;border-left:5px solid #5cacde}
.item-me .msg .box:before{background-position:-25px -40px}
.msg .box{position:relative;padding:7px 12px;zoom:1}
.pdfBox{width:100%;padding:6px;height:90%}
.pdfPage{width:100%;height:10%;text-align:center;color:#fff}
.msg .box:before{background-position:0 -40px}
.msg .box:after{background-position:0 -60px}
.msg .cnt{position:relative;min-height:20px;line-height:20px;overflow:hidden;white-space:normal;word-wrap:break-word;word-break:break-all;font-size:14px}
.msg .cnt img{width:100%;max-width:290px;_width:290px}
.msg .cnt audio{width:300px;height:35px}
.msg .cnt video{width:300px}
.msg .cnt .chartlet{width:120px;margin:0}
.chat-box .title{position:absolute;top:0;width:100%;left:0;background-color:#fff}
.chat-editor{position:absolute;bottom:0;left:0;height:60px;width:100%;padding:0 15px;background-color:#e5f4ff;border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px}
.chat-box .msg{max-width:calc(100% - 54px)}
.u-msgTime{text-align:center;font-size:12px;color:#aaa;line-height:30px}
.bottom-panel{position:relative;z-index:9;bottom:0;left:0;width:100%;background-color:rgba(0,0,0,.5);-webkit-user-select:none}
.bottom-panel .material-list{overflow:hidden;*zoom:1;height:100%;display:flex;align-items:center}
.bottom-panel .material-list .next,.bottom-panel .material-list .pre{position:relative;width:calc(5% - 8px);height:calc(100% - 8px);margin:4px;float:left;display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(255,255,255,.9);transition:background-color .2s ease}
.bottom-panel .material-list .next:hover,.bottom-panel .material-list .pre:hover{background-color:rgba(0,0,0,.3)}
.bottom-panel .material-list .next i,.bottom-panel .material-list .pre i{margin:0;font-size:2em;line-height:100%}
.bottom-panel .material-list .wraper{width:90%;height:100%;padding-bottom:10px;white-space:nowrap;overflow:hidden}
.bottom-panel .material-list .wraper .box{position:relative;height:100%;left:0;width:calc(25% - 1px);margin-right:1px;display:inline-block;cursor:pointer}
.bottom-panel .material-list .wraper .box img{position:relative;width:100%;height:100%;-webkit-transition:all .5s ease;transition:all .5s ease}
.bottom-panel .material-list .wraper .box:after{content:'';display:block;position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.2);transition:all .2s ease}
.bottom-panel .material-list .wraper .box:hover:after{background-color:transparent}
.bottom-panel .material-list .wraper .box:hover img{transform:scale(1.06);z-index:100}
.bottom-panel .material-list .wraper .box aside,.bottom-panel .material-list .wraper .box span{position:absolute;z-index:1;left:-100%;top:10%;width:50%;height:30px;color:rgba(255,255,255,.9);line-height:30px;font-size:14px;text-align:center;background-color:rgba(0,0,0,.8)}
.bottom-panel .material-list .wraper .box span{left:auto;top:auto;right:0;bottom:10%;width:50px}
.my_icon{background:url(../images/sprite2.png) no-repeat}
.my_icon.pen{background-position:0 0}
.my_icon.square{background-position:0 -300px}
.my_icon.line{background-position:0 -90px}
.my_icon.eraser{background-position:0 -180px}
.my_icon.material{background-position:0 -150px}
.my_icon.help{background-position:0 -60px}
.my_icon.report{background-position:0 -210px}
.my_icon.time{background-position:0 -330px}
.my_icon.dismiss{background-position:0 -270px}
.my_icon.setting{background-position:0 -240px}
.my_icon.mute{background-position:0 -120px}
.my_icon.camera{background-position:0 -30px}
.direction{background:url(../images/direction.png) no-repeat;width:32px;height:32px;display:inline-block}
.direction.iconLeft{background-position:0 -36px}
.direction.iconRight{background-position:0 -108px}
.pre:hover .iconLeft{background-position:0 0}
.next:hover .iconRight{background-position:0 -72px}